<template>
    <v-container fluid class="pa-0">
        <v-card class="pa-3">
            <!-- svg graphic of the PackML Statemachine -->
            <svg id="PackML" viewBox="0 0 1856 1012">
                <g id="OuterArea" style="opacity:0.2">
                    <path d="M1159,773a6,6,0,0,1,6-6h716a6,6,0,0,0,6-6V17a6,6,0,0,0-6-6H38a6,6,0,0,0-6,6v999a6,6,0,0,0,6,6H1153a6,6,0,0,0,6-6Z" transform="translate(-31.5 -10.5)" :style="{ fill: primaryColorLighten2 }" />
                    <path d="M1159,773a6,6,0,0,1,6-6h716a6,6,0,0,0,6-6V17a6,6,0,0,0-6-6H38a6,6,0,0,0-6,6v999a6,6,0,0,0,6,6H1153a6,6,0,0,0,6-6Z" transform="translate(-31.5 -10.5)" style="fill:none;stroke:#000;stroke-miterlimit:10" />
                </g>
                <rect id="InnerArea" x="11.5" y="10.5" width="1833" height="735" rx="6" :style="{ fill: primaryColor }" style="stroke:#000;stroke-miterlimit:10;opacity:0.4" />
                <g id="Clearing_Group">
                    <g id="Clearing_Form">
                        <path id="Clearing" d="M860,948.5a5.51,5.51,0,0,1-5.5-5.5V857a5.51,5.51,0,0,1,5.5-5.5h200a5.51,5.51,0,0,1,5.5,5.5v86a5.51,5.51,0,0,1-5.5,5.5Z" transform="translate(-31.5 -10.5)" :style="{ fill: stateTransitionColor }" />
                        <path :id="'Clearing_Border' + uniqueId" d="M1060,852a5,5,0,0,1,5,5v86a5,5,0,0,1-5,5H860a5,5,0,0,1-5-5V857a5,5,0,0,1,5-5h200m0-1H860a6,6,0,0,0-6,6v86a6,6,0,0,0,6,6h200a6,6,0,0,0,6-6V857a6,6,0,0,0-6-6Z" transform="translate(-31.5 -10.5)" style="fill: ''" />
                    </g>
                    <g style="isolation:isolate">
                        <path d="M914.6,901.58a6.67,6.67,0,0,1-2.18,4.62,7.47,7.47,0,0,1-5.07,1.65,7.19,7.19,0,0,1-3.89-1.05,6.78,6.78,0,0,1-2.59-3,10.82,10.82,0,0,1-1-4.48v-1.73a10.81,10.81,0,0,1,.93-4.61,7,7,0,0,1,2.66-3.07,7.39,7.39,0,0,1,4-1.08,7.12,7.12,0,0,1,4.93,1.66,6.9,6.9,0,0,1,2.17,4.69h-3.2a4.58,4.58,0,0,0-1.16-2.88,3.82,3.82,0,0,0-2.74-.88,3.75,3.75,0,0,0-3.21,1.53,7.59,7.59,0,0,0-1.15,4.49v1.64a8.18,8.18,0,0,0,1.07,4.58,3.56,3.56,0,0,0,3.14,1.57,4.17,4.17,0,0,0,2.85-.85,4.47,4.47,0,0,0,1.2-2.83Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M920.68,905h8.39v2.57h-11.6V889.11h3.21Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M942.34,899.35h-7.59V905h8.87v2.57H931.54V889.11h12v2.59h-8.78v5.11h7.59Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M956.58,903.29h-7.16l-1.49,4.31h-3.34l7-18.49h2.88l7,18.49H958.1Zm-6.25-2.59h5.35L953,893Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M970.33,900.49h-3.58v7.11h-3.21V889.11H970a7.56,7.56,0,0,1,4.94,1.44,5.08,5.08,0,0,1,1.74,4.15,5.24,5.24,0,0,1-.89,3.11,5.76,5.76,0,0,1-2.5,1.93l4.15,7.69v.17H974Zm-3.58-2.59h3.3a3.69,3.69,0,0,0,2.54-.82,2.86,2.86,0,0,0,.92-2.24,3,3,0,0,0-.85-2.3,3.6,3.6,0,0,0-2.52-.84h-3.39Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M983.16,907.6H980V889.11h3.2Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M1001.77,907.6h-3.21l-8.24-13.12V907.6H987.1V889.11h3.22l8.26,13.17V889.11h3.19Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M1019.73,905.2a6.14,6.14,0,0,1-2.78,2,11.3,11.3,0,0,1-4,.67,8,8,0,0,1-4.11-1.05,7,7,0,0,1-2.76-3,10.57,10.57,0,0,1-1-4.57v-1.45a9.79,9.79,0,0,1,2-6.55,6.93,6.93,0,0,1,5.59-2.35,7.38,7.38,0,0,1,4.91,1.53,6.62,6.62,0,0,1,2.18,4.4h-3.15a3.54,3.54,0,0,0-3.87-3.34,3.8,3.8,0,0,0-3.28,1.55,8,8,0,0,0-1.17,4.56V899a7.52,7.52,0,0,0,1.27,4.65,4.15,4.15,0,0,0,3.51,1.66,4.59,4.59,0,0,0,3.5-1.12v-3.62h-3.81v-2.44h7Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                    </g>
                </g>
                <g id="Unsuspending_Group">
                    <g id="Unsuspending_Form">
                        <path id="Unsuspending" d="M460,648.5a5.51,5.51,0,0,1-5.5-5.5V557a5.51,5.51,0,0,1,5.5-5.5H660a5.51,5.51,0,0,1,5.5,5.5v86a5.51,5.51,0,0,1-5.5,5.5Z" transform="translate(-31.5 -10.5)" :style="{ fill: stateTransitionColor }" />
                        <path :id="'Unsuspending_Border' + uniqueId" d="M660,552a5,5,0,0,1,5,5v86a5,5,0,0,1-5,5H460a5,5,0,0,1-5-5V557a5,5,0,0,1,5-5H660m0-1H460a6,6,0,0,0-6,6v86a6,6,0,0,0,6,6H660a6,6,0,0,0,6-6V557a6,6,0,0,0-6-6Z" transform="translate(-31.5 -10.5)" style="fill: ''" />
                    </g>
                    <g style="isolation:isolate">
                        <path d="M478.4,589.11v12.36a6,6,0,0,1-1.88,4.66,8.29,8.29,0,0,1-10.07,0,6.05,6.05,0,0,1-1.86-4.71V589.11h3.2v12.37a3.92,3.92,0,0,0,.94,2.83,3.66,3.66,0,0,0,2.76,1c2.48,0,3.71-1.31,3.71-3.91V589.11Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M496.49,607.6h-3.21L485,594.48V607.6h-3.21V589.11H485l8.27,13.17V589.11h3.18Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M510,602.84a2.23,2.23,0,0,0-.86-1.88,10.29,10.29,0,0,0-3.09-1.34,14.55,14.55,0,0,1-3.55-1.49,4.74,4.74,0,0,1-2.53-4.14,4.5,4.5,0,0,1,1.82-3.68,7.35,7.35,0,0,1,4.73-1.45,8,8,0,0,1,3.44.71,5.54,5.54,0,0,1,2.37,2,5.13,5.13,0,0,1,.87,2.91H510a2.89,2.89,0,0,0-.91-2.27,3.77,3.77,0,0,0-2.6-.82,3.91,3.91,0,0,0-2.44.68,2.22,2.22,0,0,0-.87,1.88,2,2,0,0,0,.94,1.69,11,11,0,0,0,3.1,1.32,14.09,14.09,0,0,1,3.46,1.46,5.41,5.41,0,0,1,1.92,1.88,4.85,4.85,0,0,1,.61,2.48,4.41,4.41,0,0,1-1.77,3.68,7.68,7.68,0,0,1-4.81,1.36,9.09,9.09,0,0,1-3.68-.74,6.2,6.2,0,0,1-2.62-2.05,5.13,5.13,0,0,1-.93-3h3.21a3,3,0,0,0,1,2.44,4.58,4.58,0,0,0,3,.86,3.91,3.91,0,0,0,2.52-.68A2.17,2.17,0,0,0,510,602.84Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M529.5,589.11v12.36a6,6,0,0,1-1.89,4.66,7.13,7.13,0,0,1-5,1.72,7.23,7.23,0,0,1-5-1.69,6.05,6.05,0,0,1-1.86-4.71V589.11h3.2v12.37a3.92,3.92,0,0,0,.94,2.83,3.64,3.64,0,0,0,2.76,1c2.47,0,3.71-1.31,3.71-3.91V589.11Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M542.59,602.84a2.23,2.23,0,0,0-.86-1.88,10.29,10.29,0,0,0-3.09-1.34,14.55,14.55,0,0,1-3.55-1.49,4.74,4.74,0,0,1-2.53-4.14,4.5,4.5,0,0,1,1.82-3.68,7.35,7.35,0,0,1,4.73-1.45,8,8,0,0,1,3.44.71,5.54,5.54,0,0,1,2.37,2,5.13,5.13,0,0,1,.87,2.91h-3.2a2.89,2.89,0,0,0-.91-2.27,3.77,3.77,0,0,0-2.6-.82,3.91,3.91,0,0,0-2.44.68,2.22,2.22,0,0,0-.87,1.88,2,2,0,0,0,.94,1.69,11,11,0,0,0,3.1,1.32,14.09,14.09,0,0,1,3.46,1.46,5.49,5.49,0,0,1,1.92,1.88,4.85,4.85,0,0,1,.61,2.48,4.41,4.41,0,0,1-1.77,3.68,7.68,7.68,0,0,1-4.81,1.36,9.09,9.09,0,0,1-3.68-.74,6.2,6.2,0,0,1-2.62-2.05,5.13,5.13,0,0,1-.93-3h3.21a3,3,0,0,0,1,2.44,4.58,4.58,0,0,0,3,.86,3.91,3.91,0,0,0,2.52-.68A2.17,2.17,0,0,0,542.59,602.84Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M551.83,600.74v6.86h-3.21V589.11h7.07a7.14,7.14,0,0,1,4.92,1.62,5.43,5.43,0,0,1,1.82,4.27,5.24,5.24,0,0,1-1.78,4.23,7.5,7.5,0,0,1-5,1.51Zm0-2.59h3.86a3.87,3.87,0,0,0,2.62-.8,3,3,0,0,0,.9-2.33,3.22,3.22,0,0,0-.92-2.4,3.55,3.55,0,0,0-2.51-.92h-3.95Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M576,599.35h-7.59V605h8.87v2.57H565.24V589.11h12v2.59h-8.78v5.11H576Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M594.6,607.6h-3.21l-8.24-13.12V607.6h-3.21V589.11h3.21l8.26,13.17V589.11h3.19Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M598.4,607.6V589.11h5.46a8.51,8.51,0,0,1,4.34,1.1,7.37,7.37,0,0,1,2.94,3.09,9.78,9.78,0,0,1,1,4.6v.93a9.89,9.89,0,0,1-1,4.62,7.38,7.38,0,0,1-3,3.07,8.94,8.94,0,0,1-4.43,1.08Zm3.21-15.9V605h2.09a4.8,4.8,0,0,0,3.88-1.58,6.89,6.89,0,0,0,1.38-4.54v-1a7.08,7.08,0,0,0-1.31-4.6,4.63,4.63,0,0,0-3.79-1.59Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M618.77,607.6h-3.2V589.11h3.2Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M637.38,607.6h-3.21l-8.24-13.12V607.6h-3.21V589.11h3.21l8.27,13.17V589.11h3.18Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M655.35,605.2a6.2,6.2,0,0,1-2.78,2,11.34,11.34,0,0,1-4,.67,8,8,0,0,1-4.11-1.05,6.92,6.92,0,0,1-2.76-3,10.43,10.43,0,0,1-1-4.57v-1.45a9.84,9.84,0,0,1,2-6.55,7,7,0,0,1,5.6-2.35,7.35,7.35,0,0,1,4.9,1.53,6.63,6.63,0,0,1,2.19,4.4h-3.15a3.55,3.55,0,0,0-3.88-3.34A3.82,3.82,0,0,0,645,593a8,8,0,0,0-1.16,4.56V599a7.52,7.52,0,0,0,1.26,4.65,4.18,4.18,0,0,0,3.52,1.66,4.59,4.59,0,0,0,3.5-1.12v-3.62h-3.81v-2.44h7Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                    </g>
                </g>
                <g id="Idle_Group">
                    <g id="Idle_Form">
                        <path id="Idle" d="M60,388.5a5.51,5.51,0,0,1-5.5-5.5V297a5.51,5.51,0,0,1,5.5-5.5H260a5.51,5.51,0,0,1,5.5,5.5v86a5.51,5.51,0,0,1-5.5,5.5Z" transform="translate(-31.5 -10.5)" :style="{ fill: primaryColor }" />
                        <path :id="'Idle_Border' + uniqueId" d="M260,292a5,5,0,0,1,5,5v86a5,5,0,0,1-5,5H60a5,5,0,0,1-5-5V297a5,5,0,0,1,5-5H260m0-1H60a6,6,0,0,0-6,6v86a6,6,0,0,0,6,6H260a6,6,0,0,0,6-6V297a6,6,0,0,0-6-6Z" transform="translate(-31.5 -10.5)" style="fill: ''" />
                    </g>
                    <g style="isolation:isolate">
                        <path d="M138.72,347.6h-3.2V329.11h3.2Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M142.67,347.6V329.11h5.46a8.57,8.57,0,0,1,4.35,1.1,7.49,7.49,0,0,1,2.94,3.09,9.9,9.9,0,0,1,1,4.6v.93a9.78,9.78,0,0,1-1.05,4.62,7.35,7.35,0,0,1-3,3.07A9,9,0,0,1,148,347.6Zm3.21-15.9V345H148a4.82,4.82,0,0,0,3.88-1.58,6.84,6.84,0,0,0,1.37-4.54v-1a7.08,7.08,0,0,0-1.3-4.6,4.65,4.65,0,0,0-3.8-1.59Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M162.87,345h8.39v2.57h-11.6V329.11h3.21Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M184.53,339.35h-7.59V345h8.87v2.57H173.72V329.11h12v2.59h-8.78v5.11h7.59Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                    </g>
                </g>
                <g id="Unholding_Group">
                    <g id="Unholding_Form">
                        <path id="Unholding" d="M460,128.5a5.51,5.51,0,0,1-5.5-5.5V37a5.51,5.51,0,0,1,5.5-5.5H660a5.51,5.51,0,0,1,5.5,5.5v86a5.51,5.51,0,0,1-5.5,5.5Z" transform="translate(-31.5 -10.5)" :style="{ fill: stateTransitionColor }" />
                        <path :id="'Unholding_Border' + uniqueId" d="M660,32a5,5,0,0,1,5,5v86a5,5,0,0,1-5,5H460a5,5,0,0,1-5-5V37a5,5,0,0,1,5-5H660m0-1H460a6,6,0,0,0-6,6v86a6,6,0,0,0,6,6H660a6,6,0,0,0,6-6V37a6,6,0,0,0-6-6Z" transform="translate(-31.5 -10.5)" style="fill: ''" />
                    </g>
                    <g style="isolation:isolate">
                        <path d="M502.21,69.11V81.47a6,6,0,0,1-1.88,4.66,8.29,8.29,0,0,1-10.07,0,6.05,6.05,0,0,1-1.86-4.71V69.11h3.2V81.48a3.92,3.92,0,0,0,.94,2.83,3.66,3.66,0,0,0,2.76,1c2.48,0,3.71-1.31,3.71-3.91V69.11Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M520.3,87.6h-3.21l-8.24-13.12V87.6h-3.21V69.11h3.21l8.27,13.17V69.11h3.18Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M538.77,87.6h-3.2V79.4h-8.26v8.2H524.1V69.11h3.21v7.7h8.26v-7.7h3.2Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M557.32,78.84a11.31,11.31,0,0,1-.94,4.77,7.08,7.08,0,0,1-2.68,3.14,7.88,7.88,0,0,1-8,0A7.18,7.18,0,0,1,543,83.62a10.81,10.81,0,0,1-1-4.68v-1a11.22,11.22,0,0,1,1-4.77A7.18,7.18,0,0,1,545.65,70a7.87,7.87,0,0,1,8,0,7.14,7.14,0,0,1,2.7,3.12,11.32,11.32,0,0,1,1,4.74Zm-3.21-1A8.15,8.15,0,0,0,553,73.16a4.1,4.1,0,0,0-6.55,0,7.79,7.79,0,0,0-1.2,4.61v1.07a8,8,0,0,0,1.18,4.71,3.83,3.83,0,0,0,3.3,1.66A3.79,3.79,0,0,0,553,83.59a8.19,8.19,0,0,0,1.15-4.75Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M563.73,85h8.39V87.6h-11.6V69.11h3.21Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M574.59,87.6V69.11h5.46a8.51,8.51,0,0,1,4.34,1.1,7.37,7.37,0,0,1,2.94,3.09,9.78,9.78,0,0,1,1,4.6v.93a9.89,9.89,0,0,1-1,4.62,7.38,7.38,0,0,1-3,3.07,8.94,8.94,0,0,1-4.43,1.08Zm3.21-15.9V85h2.09a4.8,4.8,0,0,0,3.88-1.58,6.89,6.89,0,0,0,1.38-4.54v-1a7.08,7.08,0,0,0-1.31-4.6,4.63,4.63,0,0,0-3.79-1.59Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M595,87.6h-3.2V69.11H595Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M613.57,87.6h-3.21l-8.24-13.12V87.6h-3.21V69.11h3.21l8.27,13.17V69.11h3.18Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M631.54,85.2a6.2,6.2,0,0,1-2.78,2,11.34,11.34,0,0,1-4,.67,8,8,0,0,1-4.11-1,6.92,6.92,0,0,1-2.76-3,10.39,10.39,0,0,1-1-4.57V77.76a9.79,9.79,0,0,1,2-6.54,7,7,0,0,1,5.6-2.36,7.35,7.35,0,0,1,4.9,1.53,6.63,6.63,0,0,1,2.19,4.4h-3.15a3.55,3.55,0,0,0-3.88-3.34A3.82,3.82,0,0,0,621.22,73a8,8,0,0,0-1.16,4.56V79a7.52,7.52,0,0,0,1.26,4.65,4.17,4.17,0,0,0,3.51,1.66,4.6,4.6,0,0,0,3.51-1.12V80.55h-3.81V78.11h7Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                    </g>
                </g>
                <g id="Held_Group">
                    <g id="Held_Form">
                        <path id="Held" d="M860,128.5a5.51,5.51,0,0,1-5.5-5.5V37a5.51,5.51,0,0,1,5.5-5.5h200a5.51,5.51,0,0,1,5.5,5.5v86a5.51,5.51,0,0,1-5.5,5.5Z" transform="translate(-31.5 -10.5)" :style="{ fill: primaryColor }" />
                        <path :id="'Held_Border' + uniqueId" d="M1060,32a5,5,0,0,1,5,5v86a5,5,0,0,1-5,5H860a5,5,0,0,1-5-5V37a5,5,0,0,1,5-5h200m0-1H860a6,6,0,0,0-6,6v86a6,6,0,0,0,6,6h200a6,6,0,0,0,6-6V37a6,6,0,0,0-6-6Z" transform="translate(-31.5 -10.5)" style="fill: ''" />
                    </g>
                    <g style="isolation:isolate">
                        <path d="M944.44,87.6h-3.2V79.4H933v8.2h-3.21V69.11H933v7.7h8.26v-7.7h3.2Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M959,79.35h-7.59V85h8.87V87.6H948.24V69.11h12V71.7h-8.78v5.11H959Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M966.15,85h8.39V87.6h-11.6V69.11h3.21Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M977,87.6V69.11h5.45a8.52,8.52,0,0,1,4.35,1.1,7.37,7.37,0,0,1,2.94,3.09,9.78,9.78,0,0,1,1,4.6v.93a9.89,9.89,0,0,1-1,4.62,7.38,7.38,0,0,1-3,3.07,9,9,0,0,1-4.44,1.08Zm3.21-15.9V85h2.09a4.8,4.8,0,0,0,3.88-1.58,6.89,6.89,0,0,0,1.38-4.54v-1a7.08,7.08,0,0,0-1.31-4.6,4.64,4.64,0,0,0-3.8-1.59Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                    </g>
                </g>
                <g id="Holding_Group">
                    <g id="Holding_Form">
                        <path id="Holding" d="M1260,128.5a5.51,5.51,0,0,1-5.5-5.5V37a5.51,5.51,0,0,1,5.5-5.5h200a5.51,5.51,0,0,1,5.5,5.5v86a5.51,5.51,0,0,1-5.5,5.5Z" transform="translate(-31.5 -10.5)" :style="{ fill: stateTransitionColor }" />
                        <path :id="'Holding_Border' + uniqueId" d="M1460,32a5,5,0,0,1,5,5v86a5,5,0,0,1-5,5H1260a5,5,0,0,1-5-5V37a5,5,0,0,1,5-5h200m0-1H1260a6,6,0,0,0-6,6v86a6,6,0,0,0,6,6h200a6,6,0,0,0,6-6V37a6,6,0,0,0-6-6Z" transform="translate(-31.5 -10.5)" style="fill: ''" />
                    </g>
                    <g style="isolation:isolate">
                        <path d="M1321.07,87.6h-3.2V79.4h-8.26v8.2h-3.22V69.11h3.22v7.7h8.26v-7.7h3.2Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M1339.62,78.84a11.47,11.47,0,0,1-.94,4.77,7.1,7.1,0,0,1-2.69,3.14,7.86,7.86,0,0,1-8,0,7.2,7.2,0,0,1-2.72-3.13,11,11,0,0,1-1-4.68v-1a11.22,11.22,0,0,1,1-4.77,7.22,7.22,0,0,1,2.7-3.17,7.89,7.89,0,0,1,8,0,7.05,7.05,0,0,1,2.69,3.12,11.17,11.17,0,0,1,1,4.74Zm-3.21-1a8.07,8.07,0,0,0-1.17-4.71,4.11,4.11,0,0,0-6.55,0,7.93,7.93,0,0,0-1.2,4.61v1.07a8,8,0,0,0,1.19,4.71,4.12,4.12,0,0,0,6.58,0,8.26,8.26,0,0,0,1.15-4.75Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M1346,85h8.39V87.6h-11.6V69.11H1346Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M1356.88,87.6V69.11h5.46a8.52,8.52,0,0,1,4.35,1.1,7.37,7.37,0,0,1,2.94,3.09,9.9,9.9,0,0,1,1,4.6v.93a9.78,9.78,0,0,1-1.05,4.62,7.35,7.35,0,0,1-3,3.07,9,9,0,0,1-4.44,1.08Zm3.22-15.9V85h2.09a4.81,4.81,0,0,0,3.88-1.58,6.89,6.89,0,0,0,1.38-4.54v-1a7.08,7.08,0,0,0-1.31-4.6,4.64,4.64,0,0,0-3.8-1.59Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M1377.26,87.6h-3.2V69.11h3.2Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M1395.87,87.6h-3.21l-8.24-13.12V87.6h-3.21V69.11h3.21l8.26,13.17V69.11h3.19Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M1413.83,85.2a6.09,6.09,0,0,1-2.78,2,11.28,11.28,0,0,1-4,.67,8,8,0,0,1-4.12-1,7,7,0,0,1-2.76-3,10.68,10.68,0,0,1-1-4.57V77.76a9.74,9.74,0,0,1,2-6.54,7,7,0,0,1,5.6-2.36,7.37,7.37,0,0,1,4.9,1.53,6.58,6.58,0,0,1,2.18,4.4h-3.15a3.53,3.53,0,0,0-3.87-3.34,3.8,3.8,0,0,0-3.28,1.55,7.89,7.89,0,0,0-1.16,4.56V79a7.52,7.52,0,0,0,1.26,4.65,4.15,4.15,0,0,0,3.51,1.66,4.63,4.63,0,0,0,3.51-1.12V80.55h-3.81V78.11h7Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                    </g>
                </g>
                <g id="Starting_Group">
                    <g id="Starting_Form">
                        <path id="Starting" d="M460,388.5a5.51,5.51,0,0,1-5.5-5.5V297a5.51,5.51,0,0,1,5.5-5.5H660a5.51,5.51,0,0,1,5.5,5.5v86a5.51,5.51,0,0,1-5.5,5.5Z" transform="translate(-31.5 -10.5)" :style="{ fill: stateTransitionColor }" />
                        <path :id="'Starting_Border' + uniqueId" d="M660,292a5,5,0,0,1,5,5v86a5,5,0,0,1-5,5H460a5,5,0,0,1-5-5V297a5,5,0,0,1,5-5H660m0-1H460a6,6,0,0,0-6,6v86a6,6,0,0,0,6,6H660a6,6,0,0,0,6-6V297a6,6,0,0,0-6-6Z" transform="translate(-31.5 -10.5)" style="fill: ''" />
                    </g>
                    <g style="isolation:isolate">
                        <path d="M510.48,342.84a2.2,2.2,0,0,0-.86-1.88,10.08,10.08,0,0,0-3.09-1.33,14.93,14.93,0,0,1-3.55-1.5,4.74,4.74,0,0,1-2.53-4.14,4.5,4.5,0,0,1,1.82-3.68,7.37,7.37,0,0,1,4.73-1.45,8,8,0,0,1,3.44.71,5.63,5.63,0,0,1,2.38,2,5.2,5.2,0,0,1,.86,2.91h-3.2a2.89,2.89,0,0,0-.91-2.27,3.76,3.76,0,0,0-2.59-.82,3.92,3.92,0,0,0-2.45.68,2.24,2.24,0,0,0-.87,1.88,2,2,0,0,0,.94,1.69,11,11,0,0,0,3.1,1.32,14.18,14.18,0,0,1,3.47,1.46,5.46,5.46,0,0,1,1.91,1.88,4.85,4.85,0,0,1,.61,2.48,4.41,4.41,0,0,1-1.77,3.68,7.67,7.67,0,0,1-4.8,1.36,9.11,9.11,0,0,1-3.69-.74,6.32,6.32,0,0,1-2.62-2.05,5.13,5.13,0,0,1-.93-3.05h3.21a3,3,0,0,0,1,2.44,4.61,4.61,0,0,0,3,.86,3.94,3.94,0,0,0,2.52-.68A2.19,2.19,0,0,0,510.48,342.84Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M529.87,331.7H524.1v15.9h-3.18V331.7H515.2v-2.59h14.67Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M541.12,343.29H534l-1.5,4.31h-3.34l7-18.49H539l7,18.49h-3.35Zm-6.26-2.59h5.35L537.54,333Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M554.86,340.49h-3.58v7.11h-3.21V329.11h6.5a7.54,7.54,0,0,1,4.94,1.44,5.08,5.08,0,0,1,1.74,4.15,5.24,5.24,0,0,1-.89,3.11,5.69,5.69,0,0,1-2.5,1.93l4.15,7.69v.17h-3.44Zm-3.58-2.59h3.31a3.62,3.62,0,0,0,2.53-.82,2.86,2.86,0,0,0,.92-2.24,3,3,0,0,0-.85-2.3,3.6,3.6,0,0,0-2.52-.84h-3.39Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M577,331.7h-5.77v15.9h-3.18V331.7h-5.72v-2.59H577Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M582.83,347.6h-3.2V329.11h3.2Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M601.44,347.6h-3.21L590,334.48V347.6h-3.21V329.11H590l8.27,13.17V329.11h3.18Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M619.41,345.2a6.2,6.2,0,0,1-2.78,2,11.34,11.34,0,0,1-4,.67,8,8,0,0,1-4.11-1.05,6.92,6.92,0,0,1-2.76-3,10.39,10.39,0,0,1-1-4.57v-1.45a9.79,9.79,0,0,1,2-6.54,7,7,0,0,1,5.6-2.36,7.35,7.35,0,0,1,4.9,1.53,6.63,6.63,0,0,1,2.19,4.4h-3.15a3.55,3.55,0,0,0-3.88-3.34,3.82,3.82,0,0,0-3.28,1.55,8,8,0,0,0-1.16,4.56V339a7.52,7.52,0,0,0,1.26,4.65,4.17,4.17,0,0,0,3.51,1.66,4.62,4.62,0,0,0,3.51-1.12v-3.62H612.4v-2.44h7Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                    </g>
                </g>
                <g id="Execute_Group">
                    <g id="Execute_Form">
                        <path id="Execute" d="M860,388.5a5.51,5.51,0,0,1-5.5-5.5V297a5.51,5.51,0,0,1,5.5-5.5h200a5.51,5.51,0,0,1,5.5,5.5v86a5.51,5.51,0,0,1-5.5,5.5Z" transform="translate(-31.5 -10.5)" :style="{ fill: executeColor }" />
                        <path :id="'Execute_Border' + uniqueId" d="M1060,292a5,5,0,0,1,5,5v86a5,5,0,0,1-5,5H860a5,5,0,0,1-5-5V297a5,5,0,0,1,5-5h200m0-1H860a6,6,0,0,0-6,6v86a6,6,0,0,0,6,6h200a6,6,0,0,0,6-6V297a6,6,0,0,0-6-6Z" transform="translate(-31.5 -10.5)" style="fill: ''" />
                    </g>
                    <g style="isolation:isolate">
                        <path d="M917.55,339.35H910V345h8.88v2.57H906.75V329.11h12v2.59H910v5.11h7.59Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M927.81,335.79l3.89-6.68h3.7l-5.58,9.17,5.71,9.32h-3.75l-4-6.78-4,6.78h-3.73l5.73-9.32-5.6-9.17h3.71Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M948.71,339.35h-7.59V345H950v2.57H937.9V329.11h12v2.59h-8.78v5.11h7.59Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M966.71,341.58a6.71,6.71,0,0,1-2.18,4.62,7.47,7.47,0,0,1-5.07,1.65,7.28,7.28,0,0,1-3.89-1,7,7,0,0,1-2.6-3,10.82,10.82,0,0,1-1-4.48v-1.73A10.81,10.81,0,0,1,953,333a7,7,0,0,1,2.66-3.07,7.39,7.39,0,0,1,4-1.08,7.14,7.14,0,0,1,4.93,1.66,6.92,6.92,0,0,1,2.17,4.69h-3.2a4.58,4.58,0,0,0-1.16-2.88,3.84,3.84,0,0,0-2.74-.88,3.76,3.76,0,0,0-3.22,1.53,7.67,7.67,0,0,0-1.14,4.49v1.64a8.1,8.1,0,0,0,1.07,4.58,3.55,3.55,0,0,0,3.14,1.57,4.12,4.12,0,0,0,2.84-.85,4.42,4.42,0,0,0,1.21-2.83Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M983.1,329.11v12.36a6,6,0,0,1-1.89,4.66,7.13,7.13,0,0,1-5,1.72,7.23,7.23,0,0,1-5-1.69,6.05,6.05,0,0,1-1.86-4.71V329.11h3.2v12.37a3.92,3.92,0,0,0,.94,2.83,3.64,3.64,0,0,0,2.76,1c2.47,0,3.71-1.31,3.71-3.91V329.11Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M999.88,331.7h-5.76v15.9h-3.19V331.7h-5.71v-2.59h14.66Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M1013.11,339.35h-7.59V345h8.87v2.57h-12.08V329.11h12v2.59h-8.78v5.11h7.59Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                    </g>
                </g>
                <g id="Completing_Group">
                    <g id="Completing_Form">
                        <path id="Completing" d="M1260,388.5a5.51,5.51,0,0,1-5.5-5.5V297a5.51,5.51,0,0,1,5.5-5.5h200a5.51,5.51,0,0,1,5.5,5.5v86a5.51,5.51,0,0,1-5.5,5.5Z" transform="translate(-31.5 -10.5)" :style="{ fill: stateTransitionColor }" />
                        <path :id="'Completing_Border' + uniqueId" d="M1460,292a5,5,0,0,1,5,5v86a5,5,0,0,1-5,5H1260a5,5,0,0,1-5-5V297a5,5,0,0,1,5-5h200m0-1H1260a6,6,0,0,0-6,6v86a6,6,0,0,0,6,6h200a6,6,0,0,0,6-6V297a6,6,0,0,0-6-6Z" transform="translate(-31.5 -10.5)" style="fill: ''" />
                    </g>
                    <g style="isolation:isolate">
                        <path d="M1294.68,341.58a6.67,6.67,0,0,1-2.18,4.62,7.47,7.47,0,0,1-5.07,1.65,7.28,7.28,0,0,1-3.89-1,6.93,6.93,0,0,1-2.59-3,10.82,10.82,0,0,1-1-4.48v-1.73a10.81,10.81,0,0,1,.93-4.61,7,7,0,0,1,2.66-3.07,7.43,7.43,0,0,1,4-1.08,7.1,7.1,0,0,1,4.92,1.66,6.88,6.88,0,0,1,2.17,4.69h-3.2a4.58,4.58,0,0,0-1.16-2.88,3.81,3.81,0,0,0-2.73-.88,3.75,3.75,0,0,0-3.22,1.53,7.67,7.67,0,0,0-1.15,4.49v1.64a8.18,8.18,0,0,0,1.07,4.58,3.56,3.56,0,0,0,3.14,1.57,4.15,4.15,0,0,0,2.85-.85,4.47,4.47,0,0,0,1.2-2.83Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M1312.3,338.84a11.31,11.31,0,0,1-.94,4.77,7.08,7.08,0,0,1-2.68,3.14,7.86,7.86,0,0,1-8,0,7.13,7.13,0,0,1-2.72-3.13,11,11,0,0,1-1-4.68v-1a11.22,11.22,0,0,1,1-4.77,7.22,7.22,0,0,1,2.7-3.17,7.87,7.87,0,0,1,8,0,7.14,7.14,0,0,1,2.7,3.12,11.17,11.17,0,0,1,1,4.74Zm-3.21-1a8.07,8.07,0,0,0-1.16-4.71,4.11,4.11,0,0,0-6.55,0,7.93,7.93,0,0,0-1.2,4.61v1.07a8,8,0,0,0,1.19,4.71,3.81,3.81,0,0,0,3.29,1.66,3.77,3.77,0,0,0,3.28-1.62,8.19,8.19,0,0,0,1.15-4.75Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M1319.67,329.11l5.33,14.17,5.32-14.17h4.15V347.6h-3.2v-6.1l.32-8.15-5.46,14.25h-2.3l-5.45-14.23.32,8.13v6.1h-3.2V329.11Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M1341.48,340.74v6.86h-3.21V329.11h7.07a7.15,7.15,0,0,1,4.92,1.62,5.43,5.43,0,0,1,1.82,4.27,5.25,5.25,0,0,1-1.79,4.23,7.46,7.46,0,0,1-5,1.51Zm0-2.59h3.86a3.83,3.83,0,0,0,2.61-.8,3,3,0,0,0,.9-2.33,3.21,3.21,0,0,0-.91-2.4,3.57,3.57,0,0,0-2.51-.92h-4Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M1358.1,345h8.39v2.57h-11.61V329.11h3.22Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M1379.75,339.35h-7.59V345H1381v2.57H1369V329.11h12v2.59h-8.79v5.11h7.59Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M1397.26,331.7h-5.76v15.9h-3.19V331.7h-5.71v-2.59h14.66Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M1403.08,347.6h-3.2V329.11h3.2Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M1421.69,347.6h-3.22l-8.23-13.12V347.6H1407V329.11h3.22l8.26,13.17V329.11h3.19Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M1439.65,345.2a6.14,6.14,0,0,1-2.78,2,11.3,11.3,0,0,1-4,.67,8,8,0,0,1-4.11-1.05,7,7,0,0,1-2.76-3,10.39,10.39,0,0,1-1-4.57v-1.45a9.74,9.74,0,0,1,2-6.54,6.94,6.94,0,0,1,5.59-2.36,7.35,7.35,0,0,1,4.9,1.53,6.58,6.58,0,0,1,2.19,4.4h-3.15a3.54,3.54,0,0,0-3.87-3.34,3.79,3.79,0,0,0-3.28,1.55,8,8,0,0,0-1.17,4.56V339a7.46,7.46,0,0,0,1.27,4.65,4.15,4.15,0,0,0,3.51,1.66,4.59,4.59,0,0,0,3.5-1.12v-3.62h-3.81v-2.44h7Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                    </g>
                </g>
                <g id="Complete_Group">
                    <g id="Complete_Form">
                        <path id="Complete" d="M1660,388.5a5.51,5.51,0,0,1-5.5-5.5V297a5.51,5.51,0,0,1,5.5-5.5h200a5.51,5.51,0,0,1,5.5,5.5v86a5.51,5.51,0,0,1-5.5,5.5Z" transform="translate(-31.5 -10.5)" :style="{ fill: primaryColor }" />
                        <path :id="'Complete_Border' + uniqueId" d="M1860,292a5,5,0,0,1,5,5v86a5,5,0,0,1-5,5H1660a5,5,0,0,1-5-5V297a5,5,0,0,1,5-5h200m0-1H1660a6,6,0,0,0-6,6v86a6,6,0,0,0,6,6h200a6,6,0,0,0,6-6V297a6,6,0,0,0-6-6Z" transform="translate(-31.5 -10.5)" style="fill: ''" />
                    </g>
                    <g style="isolation:isolate">
                        <path d="M1709.08,341.58a6.71,6.71,0,0,1-2.18,4.62,7.47,7.47,0,0,1-5.07,1.65,7.28,7.28,0,0,1-3.89-1,7,7,0,0,1-2.6-3,10.82,10.82,0,0,1-.95-4.48v-1.73a10.81,10.81,0,0,1,.93-4.61,7,7,0,0,1,2.66-3.07,7.39,7.39,0,0,1,4-1.08,7.14,7.14,0,0,1,4.93,1.66,6.92,6.92,0,0,1,2.17,4.69h-3.2a4.58,4.58,0,0,0-1.16-2.88,3.84,3.84,0,0,0-2.74-.88,3.76,3.76,0,0,0-3.22,1.53,7.67,7.67,0,0,0-1.14,4.49v1.64a8.1,8.1,0,0,0,1.07,4.58,3.55,3.55,0,0,0,3.14,1.57,4.12,4.12,0,0,0,2.84-.85,4.42,4.42,0,0,0,1.21-2.83Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M1726.7,338.84a11.31,11.31,0,0,1-.94,4.77,7.14,7.14,0,0,1-2.68,3.14,7.88,7.88,0,0,1-8,0,7.11,7.11,0,0,1-2.71-3.13,11,11,0,0,1-1-4.68v-1a11.22,11.22,0,0,1,1-4.77A7.18,7.18,0,0,1,1715,330a7.87,7.87,0,0,1,8,0,7.14,7.14,0,0,1,2.7,3.12,11.32,11.32,0,0,1,1,4.74Zm-3.21-1a8.15,8.15,0,0,0-1.16-4.71,3.82,3.82,0,0,0-3.3-1.63,3.76,3.76,0,0,0-3.25,1.63,7.79,7.79,0,0,0-1.2,4.61v1.07a8,8,0,0,0,1.18,4.71,4.12,4.12,0,0,0,6.58,0,8.19,8.19,0,0,0,1.15-4.75Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M1734.06,329.11l5.34,14.17,5.31-14.17h4.16V347.6h-3.2v-6.1l.31-8.15-5.45,14.25h-2.3l-5.45-14.23.32,8.13v6.1h-3.2V329.11Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M1755.87,340.74v6.86h-3.21V329.11h7.07a7.12,7.12,0,0,1,4.92,1.62,5.4,5.4,0,0,1,1.82,4.27,5.24,5.24,0,0,1-1.78,4.23,7.47,7.47,0,0,1-5,1.51Zm0-2.59h3.86a3.84,3.84,0,0,0,2.62-.8,3,3,0,0,0,.9-2.33,3.21,3.21,0,0,0-.91-2.4,3.58,3.58,0,0,0-2.52-.92h-4Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M1772.49,345h8.39v2.57h-11.6V329.11h3.21Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M1794.15,339.35h-7.59V345h8.87v2.57h-12.08V329.11h12v2.59h-8.78v5.11h7.59Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M1811.66,331.7h-5.77v15.9h-3.18V331.7H1797v-2.59h14.67Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M1824.89,339.35h-7.6V345h8.88v2.57h-12.09V329.11h12v2.59h-8.79v5.11h7.6Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                    </g>
                </g>
                <g id="Resetting_Group">
                    <g id="Resetting_Form">
                        <path id="Resetting" d="M60,648.5a5.51,5.51,0,0,1-5.5-5.5V557a5.51,5.51,0,0,1,5.5-5.5H260a5.51,5.51,0,0,1,5.5,5.5v86a5.51,5.51,0,0,1-5.5,5.5Z" transform="translate(-31.5 -10.5)" :style="{ fill: stateTransitionColor }" />
                        <path :id="'Resetting_Border' + uniqueId" d="M260,552a5,5,0,0,1,5,5v86a5,5,0,0,1-5,5H60a5,5,0,0,1-5-5V557a5,5,0,0,1,5-5H260m0-1H60a6,6,0,0,0-6,6v86a6,6,0,0,0,6,6H260a6,6,0,0,0,6-6V557a6,6,0,0,0-6-6Z" transform="translate(-31.5 -10.5)" style="fill: ''" />
                    </g>
                    <g style="isolation:isolate">
                        <path d="M100.26,600.49H96.68v7.11H93.46V589.11H100a7.54,7.54,0,0,1,4.94,1.44,5.08,5.08,0,0,1,1.74,4.15,5.24,5.24,0,0,1-.89,3.11,5.76,5.76,0,0,1-2.5,1.93l4.15,7.69v.17H104Zm-3.58-2.59H100a3.71,3.71,0,0,0,2.54-.82,2.89,2.89,0,0,0,.91-2.24,3.05,3.05,0,0,0-.84-2.3,3.63,3.63,0,0,0-2.52-.84H96.68Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M120.49,599.35H112.9V605h8.87v2.57H109.69V589.11h12v2.59H112.9v5.11h7.59Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M134.05,602.84a2.2,2.2,0,0,0-.86-1.88,10.29,10.29,0,0,0-3.09-1.34,14.55,14.55,0,0,1-3.55-1.49A4.74,4.74,0,0,1,124,594a4.5,4.5,0,0,1,1.82-3.68,7.35,7.35,0,0,1,4.73-1.45,8,8,0,0,1,3.44.71,5.63,5.63,0,0,1,2.38,2,5.2,5.2,0,0,1,.86,2.91h-3.2a2.89,2.89,0,0,0-.91-2.27,3.76,3.76,0,0,0-2.59-.82,3.92,3.92,0,0,0-2.45.68,2.22,2.22,0,0,0-.87,1.88,2,2,0,0,0,.94,1.69,11,11,0,0,0,3.1,1.32,14.35,14.35,0,0,1,3.47,1.46,5.46,5.46,0,0,1,1.91,1.88,4.85,4.85,0,0,1,.61,2.48,4.41,4.41,0,0,1-1.77,3.68,7.67,7.67,0,0,1-4.8,1.36,9.11,9.11,0,0,1-3.69-.74,6.32,6.32,0,0,1-2.62-2.05,5.13,5.13,0,0,1-.93-3h3.21a3,3,0,0,0,1,2.44,4.61,4.61,0,0,0,3,.86,3.94,3.94,0,0,0,2.52-.68A2.19,2.19,0,0,0,134.05,602.84Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M150.88,599.35h-7.59V605h8.88v2.57H140.08V589.11h12v2.59h-8.79v5.11h7.59Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M168.39,591.7h-5.76v15.9h-3.19V591.7h-5.71v-2.59h14.66Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M184.38,591.7h-5.77v15.9h-3.19V591.7h-5.71v-2.59h14.67Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M190.19,607.6H187V589.11h3.2Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M208.8,607.6h-3.21l-8.24-13.12V607.6h-3.21V589.11h3.21l8.26,13.17V589.11h3.19Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M226.76,605.2a6.09,6.09,0,0,1-2.78,2,11.28,11.28,0,0,1-4,.67,8,8,0,0,1-4.12-1.05,7,7,0,0,1-2.76-3,10.71,10.71,0,0,1-1-4.57v-1.45a9.79,9.79,0,0,1,2-6.55,7,7,0,0,1,5.6-2.35,7.37,7.37,0,0,1,4.9,1.53,6.58,6.58,0,0,1,2.18,4.4H223.6a3.53,3.53,0,0,0-3.87-3.34,3.8,3.8,0,0,0-3.28,1.55,7.89,7.89,0,0,0-1.16,4.56V599a7.52,7.52,0,0,0,1.26,4.65,4.15,4.15,0,0,0,3.51,1.66,4.63,4.63,0,0,0,3.51-1.12v-3.62h-3.81v-2.44h7Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                    </g>
                </g>
                <g id="Suspended_Group">
                    <g id="Suspended_Form">
                        <path id="Suspended" d="M860,648.5a5.51,5.51,0,0,1-5.5-5.5V557a5.51,5.51,0,0,1,5.5-5.5h200a5.51,5.51,0,0,1,5.5,5.5v86a5.51,5.51,0,0,1-5.5,5.5Z" transform="translate(-31.5 -10.5)" :style="{ fill: primaryColor }" />
                        <path :id="'Suspended_Border' + uniqueId" d="M1060,552a5,5,0,0,1,5,5v86a5,5,0,0,1-5,5H860a5,5,0,0,1-5-5V557a5,5,0,0,1,5-5h200m0-1H860a6,6,0,0,0-6,6v86a6,6,0,0,0,6,6h200a6,6,0,0,0,6-6V557a6,6,0,0,0-6-6Z" transform="translate(-31.5 -10.5)" style="fill: ''" />
                    </g>
                    <g style="isolation:isolate">
                        <path d="M898.15,602.84a2.23,2.23,0,0,0-.86-1.88,10.29,10.29,0,0,0-3.09-1.34,14.55,14.55,0,0,1-3.55-1.49,4.74,4.74,0,0,1-2.53-4.14,4.5,4.5,0,0,1,1.82-3.68,7.35,7.35,0,0,1,4.73-1.45,8,8,0,0,1,3.44.71,5.54,5.54,0,0,1,2.37,2,5.13,5.13,0,0,1,.87,2.91h-3.2a2.89,2.89,0,0,0-.91-2.27,3.77,3.77,0,0,0-2.6-.82,3.91,3.91,0,0,0-2.44.68,2.22,2.22,0,0,0-.87,1.88,2,2,0,0,0,.94,1.69,11,11,0,0,0,3.1,1.32,14.09,14.09,0,0,1,3.46,1.46,5.49,5.49,0,0,1,1.92,1.88,4.85,4.85,0,0,1,.61,2.48,4.41,4.41,0,0,1-1.77,3.68,7.68,7.68,0,0,1-4.81,1.36,9.09,9.09,0,0,1-3.68-.74,6.2,6.2,0,0,1-2.62-2.05,5.13,5.13,0,0,1-.93-3h3.21a3,3,0,0,0,1,2.44,4.58,4.58,0,0,0,3,.86,3.91,3.91,0,0,0,2.52-.68A2.17,2.17,0,0,0,898.15,602.84Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M917.7,589.11v12.36a6,6,0,0,1-1.89,4.66,7.13,7.13,0,0,1-5,1.72,7.23,7.23,0,0,1-5-1.69,6.05,6.05,0,0,1-1.86-4.71V589.11h3.2v12.37a3.92,3.92,0,0,0,.94,2.83,3.64,3.64,0,0,0,2.76,1c2.47,0,3.71-1.31,3.71-3.91V589.11Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M930.79,602.84a2.23,2.23,0,0,0-.86-1.88,10.29,10.29,0,0,0-3.09-1.34,14.55,14.55,0,0,1-3.55-1.49,4.74,4.74,0,0,1-2.53-4.14,4.5,4.5,0,0,1,1.82-3.68,7.34,7.34,0,0,1,4.73-1.45,8,8,0,0,1,3.44.71,5.54,5.54,0,0,1,2.37,2,5.13,5.13,0,0,1,.87,2.91h-3.2a2.89,2.89,0,0,0-.91-2.27,3.77,3.77,0,0,0-2.6-.82,3.89,3.89,0,0,0-2.44.68A2.22,2.22,0,0,0,924,594a2,2,0,0,0,.94,1.69A11,11,0,0,0,928,597a14.09,14.09,0,0,1,3.46,1.46,5.49,5.49,0,0,1,1.92,1.88,4.85,4.85,0,0,1,.61,2.48,4.41,4.41,0,0,1-1.77,3.68,7.68,7.68,0,0,1-4.81,1.36,9.09,9.09,0,0,1-3.68-.74,6.2,6.2,0,0,1-2.62-2.05,5.13,5.13,0,0,1-.93-3h3.21a3,3,0,0,0,1,2.44,4.58,4.58,0,0,0,3,.86,3.91,3.91,0,0,0,2.52-.68A2.17,2.17,0,0,0,930.79,602.84Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M940,600.74v6.86h-3.21V589.11h7.07a7.15,7.15,0,0,1,4.92,1.62,5.43,5.43,0,0,1,1.82,4.27,5.24,5.24,0,0,1-1.78,4.23,7.5,7.5,0,0,1-5,1.51Zm0-2.59h3.86a3.83,3.83,0,0,0,2.61-.8,3,3,0,0,0,.91-2.33,3.22,3.22,0,0,0-.92-2.4,3.57,3.57,0,0,0-2.51-.92h-4Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M964.24,599.35h-7.59V605h8.87v2.57H953.44V589.11h12v2.59h-8.78v5.11h7.59Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M982.8,607.6h-3.21l-8.24-13.12V607.6h-3.21V589.11h3.21l8.26,13.17V589.11h3.19Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M986.6,607.6V589.11h5.46a8.51,8.51,0,0,1,4.34,1.1,7.37,7.37,0,0,1,2.94,3.09,9.78,9.78,0,0,1,1,4.6v.93a9.89,9.89,0,0,1-1,4.62,7.38,7.38,0,0,1-3,3.07,8.94,8.94,0,0,1-4.43,1.08Zm3.21-15.9V605h2.09a4.8,4.8,0,0,0,3.88-1.58,6.89,6.89,0,0,0,1.38-4.54v-1a7.08,7.08,0,0,0-1.31-4.6,4.63,4.63,0,0,0-3.79-1.59Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M1014.39,599.35h-7.6V605h8.88v2.57h-12.09V589.11h12v2.59h-8.79v5.11h7.6Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M1018.28,607.6V589.11h5.46a8.52,8.52,0,0,1,4.35,1.1,7.37,7.37,0,0,1,2.94,3.09,9.9,9.9,0,0,1,1,4.6v.93a9.78,9.78,0,0,1-1,4.62,7.29,7.29,0,0,1-3,3.07,9,9,0,0,1-4.44,1.08Zm3.22-15.9V605h2.09a4.81,4.81,0,0,0,3.88-1.58,6.89,6.89,0,0,0,1.38-4.54v-1a7.08,7.08,0,0,0-1.31-4.6,4.64,4.64,0,0,0-3.8-1.59Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                    </g>
                </g>
                <g id="Suspending_Group">
                    <g id="Suspending_Form">
                        <path id="Suspending" d="M1260,648.5a5.51,5.51,0,0,1-5.5-5.5V557a5.51,5.51,0,0,1,5.5-5.5h200a5.51,5.51,0,0,1,5.5,5.5v86a5.51,5.51,0,0,1-5.5,5.5Z" transform="translate(-31.5 -10.5)" :style="{ fill: stateTransitionColor }" />
                        <path :id="'Suspending_Border' + uniqueId" d="M1460,552a5,5,0,0,1,5,5v86a5,5,0,0,1-5,5H1260a5,5,0,0,1-5-5V557a5,5,0,0,1,5-5h200m0-1H1260a6,6,0,0,0-6,6v86a6,6,0,0,0,6,6h200a6,6,0,0,0,6-6V557a6,6,0,0,0-6-6Z" transform="translate(-31.5 -10.5)" style="fill: ''" />
                    </g>
                    <g style="isolation:isolate">
                        <path d="M1292.25,602.84a2.23,2.23,0,0,0-.86-1.88,10.29,10.29,0,0,0-3.09-1.34,14.65,14.65,0,0,1-3.56-1.49,4.75,4.75,0,0,1-2.52-4.14,4.48,4.48,0,0,1,1.82-3.68,7.34,7.34,0,0,1,4.73-1.45,8.07,8.07,0,0,1,3.44.71,5.66,5.66,0,0,1,2.37,2,5.12,5.12,0,0,1,.86,2.91h-3.19a2.92,2.92,0,0,0-.91-2.27,3.79,3.79,0,0,0-2.6-.82,3.89,3.89,0,0,0-2.44.68,2.22,2.22,0,0,0-.87,1.88,2,2,0,0,0,.94,1.69,11,11,0,0,0,3.09,1.32,14.18,14.18,0,0,1,3.47,1.46,5.58,5.58,0,0,1,1.92,1.88,5,5,0,0,1,.61,2.48,4.41,4.41,0,0,1-1.77,3.68,7.72,7.72,0,0,1-4.81,1.36,9.11,9.11,0,0,1-3.69-.74,6.23,6.23,0,0,1-2.61-2.05,5.13,5.13,0,0,1-.94-3h3.22a3,3,0,0,0,1,2.44,4.58,4.58,0,0,0,3,.86,3.91,3.91,0,0,0,2.52-.68A2.19,2.19,0,0,0,1292.25,602.84Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M1311.8,589.11v12.36a6,6,0,0,1-1.89,4.66,8.27,8.27,0,0,1-10.06,0,6.06,6.06,0,0,1-1.87-4.71V589.11h3.2v12.37a4,4,0,0,0,.94,2.83,3.68,3.68,0,0,0,2.77,1c2.47,0,3.71-1.31,3.71-3.91V589.11Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M1324.88,602.84A2.22,2.22,0,0,0,1324,601a10.29,10.29,0,0,0-3.09-1.34,14.65,14.65,0,0,1-3.56-1.49,4.75,4.75,0,0,1-2.52-4.14,4.48,4.48,0,0,1,1.82-3.68,7.34,7.34,0,0,1,4.73-1.45,8.07,8.07,0,0,1,3.44.71,5.66,5.66,0,0,1,2.37,2,5.12,5.12,0,0,1,.86,2.91h-3.2a2.92,2.92,0,0,0-.9-2.27,3.79,3.79,0,0,0-2.6-.82,3.89,3.89,0,0,0-2.44.68,2.22,2.22,0,0,0-.87,1.88,2,2,0,0,0,.94,1.69,11,11,0,0,0,3.09,1.32,14.18,14.18,0,0,1,3.47,1.46,5.58,5.58,0,0,1,1.92,1.88,5,5,0,0,1,.61,2.48,4.41,4.41,0,0,1-1.77,3.68,7.72,7.72,0,0,1-4.81,1.36,9.11,9.11,0,0,1-3.69-.74,6.23,6.23,0,0,1-2.61-2.05,5.07,5.07,0,0,1-.94-3h3.22a3,3,0,0,0,1,2.44,4.58,4.58,0,0,0,3,.86,3.91,3.91,0,0,0,2.52-.68A2.19,2.19,0,0,0,1324.88,602.84Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M1334.13,600.74v6.86h-3.21V589.11H1338a7.15,7.15,0,0,1,4.92,1.62,5.43,5.43,0,0,1,1.82,4.27,5.25,5.25,0,0,1-1.79,4.23,7.47,7.47,0,0,1-5,1.51Zm0-2.59H1338a3.83,3.83,0,0,0,2.61-.8,3,3,0,0,0,.9-2.33,3.21,3.21,0,0,0-.91-2.4,3.57,3.57,0,0,0-2.51-.92h-3.95Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M1358.34,599.35h-7.59V605h8.87v2.57h-12.09V589.11h12v2.59h-8.78v5.11h7.59Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M1376.9,607.6h-3.21l-8.24-13.12V607.6h-3.22V589.11h3.22l8.26,13.17V589.11h3.19Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M1380.69,607.6V589.11h5.46a8.52,8.52,0,0,1,4.35,1.1,7.37,7.37,0,0,1,2.94,3.09,9.9,9.9,0,0,1,1,4.6v.93a9.78,9.78,0,0,1-1,4.62,7.35,7.35,0,0,1-3,3.07,9,9,0,0,1-4.44,1.08Zm3.22-15.9V605H1386a4.81,4.81,0,0,0,3.88-1.58,6.89,6.89,0,0,0,1.38-4.54v-1a7.08,7.08,0,0,0-1.31-4.6,4.64,4.64,0,0,0-3.8-1.59Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M1401.07,607.6h-3.2V589.11h3.2Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M1419.68,607.6h-3.21l-8.24-13.12V607.6H1405V589.11h3.21l8.26,13.17V589.11h3.19Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M1437.64,605.2a6.09,6.09,0,0,1-2.78,2,11.28,11.28,0,0,1-4,.67,8,8,0,0,1-4.12-1.05,7,7,0,0,1-2.76-3,10.57,10.57,0,0,1-1-4.57v-1.45a9.79,9.79,0,0,1,2-6.55,7,7,0,0,1,5.6-2.35,7.37,7.37,0,0,1,4.9,1.53,6.58,6.58,0,0,1,2.18,4.4h-3.15a3.53,3.53,0,0,0-3.87-3.34,3.8,3.8,0,0,0-3.28,1.55,7.89,7.89,0,0,0-1.16,4.56V599a7.52,7.52,0,0,0,1.26,4.65,4.15,4.15,0,0,0,3.51,1.66,4.63,4.63,0,0,0,3.51-1.12v-3.62h-3.81v-2.44h7Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                    </g>
                </g>
                <g id="Stopping_Group">
                    <g id="Stopping_Form">
                        <path id="Stopping" d="M460,948.5a5.51,5.51,0,0,1-5.5-5.5V857a5.51,5.51,0,0,1,5.5-5.5H660a5.51,5.51,0,0,1,5.5,5.5v86a5.51,5.51,0,0,1-5.5,5.5Z" transform="translate(-31.5 -10.5)" :style="{ fill: stateTransitionColor }" />
                        <path :id="'Stopping_Border' + uniqueId" d="M660,852a5,5,0,0,1,5,5v86a5,5,0,0,1-5,5H460a5,5,0,0,1-5-5V857a5,5,0,0,1,5-5H660m0-1H460a6,6,0,0,0-6,6v86a6,6,0,0,0,6,6H660a6,6,0,0,0,6-6V857a6,6,0,0,0-6-6Z" transform="translate(-31.5 -10.5)" style="fill: ''" />
                    </g>
                    <g style="isolation:isolate">
                        <path d="M508.64,902.84a2.2,2.2,0,0,0-.86-1.88,10.29,10.29,0,0,0-3.09-1.34,14.55,14.55,0,0,1-3.55-1.49,4.74,4.74,0,0,1-2.53-4.14,4.5,4.5,0,0,1,1.82-3.68,7.35,7.35,0,0,1,4.73-1.45,8,8,0,0,1,3.44.71,5.63,5.63,0,0,1,2.38,2,5.2,5.2,0,0,1,.86,2.91h-3.2a2.89,2.89,0,0,0-.91-2.27,3.76,3.76,0,0,0-2.59-.82,3.92,3.92,0,0,0-2.45.68,2.22,2.22,0,0,0-.87,1.88,2,2,0,0,0,.94,1.69,11,11,0,0,0,3.1,1.32,14.18,14.18,0,0,1,3.47,1.46,5.46,5.46,0,0,1,1.91,1.88,4.85,4.85,0,0,1,.61,2.48,4.41,4.41,0,0,1-1.77,3.68,7.67,7.67,0,0,1-4.8,1.36,9.11,9.11,0,0,1-3.69-.74,6.32,6.32,0,0,1-2.62-2.05,5.13,5.13,0,0,1-.93-3h3.21a3,3,0,0,0,1,2.44,4.61,4.61,0,0,0,3,.86,3.94,3.94,0,0,0,2.52-.68A2.19,2.19,0,0,0,508.64,902.84Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M528,891.7h-5.77v15.9h-3.18V891.7h-5.72v-2.59H528Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M544.85,898.84a11.31,11.31,0,0,1-.94,4.77,7.1,7.1,0,0,1-2.69,3.14,7.86,7.86,0,0,1-8,0,7.2,7.2,0,0,1-2.72-3.13,11,11,0,0,1-1-4.68v-1a11.27,11.27,0,0,1,1-4.78,7.25,7.25,0,0,1,2.7-3.16,7.89,7.89,0,0,1,8,0,7.05,7.05,0,0,1,2.69,3.12,11.17,11.17,0,0,1,1,4.74Zm-3.21-1a8,8,0,0,0-1.17-4.71,4.11,4.11,0,0,0-6.55,0,7.93,7.93,0,0,0-1.2,4.61v1.07a8,8,0,0,0,1.19,4.71,4.12,4.12,0,0,0,6.58,0,8.26,8.26,0,0,0,1.15-4.75Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M551.26,900.74v6.86h-3.21V889.11h7.07a7.15,7.15,0,0,1,4.92,1.62,5.43,5.43,0,0,1,1.82,4.27,5.24,5.24,0,0,1-1.78,4.23,7.5,7.5,0,0,1-5,1.51Zm0-2.59h3.86a3.83,3.83,0,0,0,2.61-.8,3,3,0,0,0,.91-2.33,3.22,3.22,0,0,0-.92-2.4,3.57,3.57,0,0,0-2.51-.92h-4Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M567.88,900.74v6.86h-3.21V889.11h7.07a7.15,7.15,0,0,1,4.92,1.62,5.43,5.43,0,0,1,1.82,4.27,5.25,5.25,0,0,1-1.79,4.23,7.46,7.46,0,0,1-5,1.51Zm0-2.59h3.86a3.83,3.83,0,0,0,2.61-.8,3,3,0,0,0,.9-2.33,3.21,3.21,0,0,0-.91-2.4,3.57,3.57,0,0,0-2.51-.92h-4Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M584.67,907.6h-3.2V889.11h3.2Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M603.28,907.6h-3.21l-8.24-13.12V907.6h-3.21V889.11h3.21l8.27,13.17V889.11h3.18Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M621.25,905.2a6.2,6.2,0,0,1-2.78,2,11.34,11.34,0,0,1-4,.67,8,8,0,0,1-4.11-1.05,6.92,6.92,0,0,1-2.76-3,10.43,10.43,0,0,1-1-4.57v-1.45a9.84,9.84,0,0,1,2-6.55,7,7,0,0,1,5.6-2.35,7.35,7.35,0,0,1,4.9,1.53,6.63,6.63,0,0,1,2.19,4.4h-3.15a3.54,3.54,0,0,0-3.87-3.34,3.82,3.82,0,0,0-3.29,1.55,8,8,0,0,0-1.16,4.56V899a7.46,7.46,0,0,0,1.27,4.65,4.15,4.15,0,0,0,3.51,1.66,4.59,4.59,0,0,0,3.5-1.12v-3.62h-3.81v-2.44h7Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                    </g>
                </g>
                <g id="Stopped_Group">
                    <g id="Stopped_Form">
                        <path id="Stopped" d="M60,948.5a5.51,5.51,0,0,1-5.5-5.5V857a5.51,5.51,0,0,1,5.5-5.5H260a5.51,5.51,0,0,1,5.5,5.5v86a5.51,5.51,0,0,1-5.5,5.5Z" transform="translate(-31.5 -10.5)" :style="{ fill: primaryColor }" />
                        <path :id="'Stopped_Border' + uniqueId" d="M260,852a5,5,0,0,1,5,5v86a5,5,0,0,1-5,5H60a5,5,0,0,1-5-5V857a5,5,0,0,1,5-5H260m0-1H60a6,6,0,0,0-6,6v86a6,6,0,0,0,6,6H260a6,6,0,0,0,6-6V857a6,6,0,0,0-6-6Z" transform="translate(-31.5 -10.5)" style="fill: ''" />
                    </g>
                    <g style="isolation:isolate">
                        <path d="M114.54,902.84a2.22,2.22,0,0,0-.85-1.88,10.29,10.29,0,0,0-3.09-1.34,14.65,14.65,0,0,1-3.56-1.49,4.75,4.75,0,0,1-2.52-4.14,4.48,4.48,0,0,1,1.82-3.68,7.34,7.34,0,0,1,4.73-1.45,8.07,8.07,0,0,1,3.44.71,5.66,5.66,0,0,1,2.37,2,5.12,5.12,0,0,1,.86,2.91h-3.2a2.92,2.92,0,0,0-.9-2.27,3.79,3.79,0,0,0-2.6-.82,3.89,3.89,0,0,0-2.44.68,2.22,2.22,0,0,0-.87,1.88,2,2,0,0,0,.94,1.69,11,11,0,0,0,3.09,1.32,14.18,14.18,0,0,1,3.47,1.46,5.58,5.58,0,0,1,1.92,1.88,5,5,0,0,1,.61,2.48,4.41,4.41,0,0,1-1.77,3.68,7.72,7.72,0,0,1-4.81,1.36,9.11,9.11,0,0,1-3.69-.74,6.23,6.23,0,0,1-2.61-2.05,5.07,5.07,0,0,1-.94-3h3.22a3,3,0,0,0,1,2.44,4.58,4.58,0,0,0,3,.86,3.91,3.91,0,0,0,2.52-.68A2.19,2.19,0,0,0,114.54,902.84Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M133.93,891.7h-5.76v15.9H125V891.7h-5.71v-2.59h14.66Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M150.75,898.84a11.31,11.31,0,0,1-.94,4.77,7.08,7.08,0,0,1-2.68,3.14,7.88,7.88,0,0,1-8,0,7.18,7.18,0,0,1-2.71-3.13,10.81,10.81,0,0,1-1-4.68v-1a11.27,11.27,0,0,1,1-4.78,7.2,7.2,0,0,1,2.71-3.16,7.87,7.87,0,0,1,8,0,7.14,7.14,0,0,1,2.7,3.12,11.32,11.32,0,0,1,1,4.74Zm-3.21-1a8.13,8.13,0,0,0-1.16-4.71,4.1,4.1,0,0,0-6.55,0,7.79,7.79,0,0,0-1.2,4.61v1.07a8,8,0,0,0,1.18,4.71,3.83,3.83,0,0,0,3.3,1.66,3.79,3.79,0,0,0,3.28-1.62,8.19,8.19,0,0,0,1.15-4.75Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M157.16,900.74v6.86H154V889.11H161a7.12,7.12,0,0,1,4.92,1.62,5.4,5.4,0,0,1,1.82,4.27,5.24,5.24,0,0,1-1.78,4.23,7.5,7.5,0,0,1-5,1.51Zm0-2.59H161a3.85,3.85,0,0,0,2.62-.8,3,3,0,0,0,.9-2.33,3.22,3.22,0,0,0-.92-2.4,3.53,3.53,0,0,0-2.51-.92h-4Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M173.78,900.74v6.86h-3.21V889.11h7.07a7.12,7.12,0,0,1,4.92,1.62,5.43,5.43,0,0,1,1.82,4.27,5.24,5.24,0,0,1-1.78,4.23,7.5,7.5,0,0,1-5,1.51Zm0-2.59h3.86a3.87,3.87,0,0,0,2.62-.8,3,3,0,0,0,.9-2.33,3.22,3.22,0,0,0-.92-2.4,3.55,3.55,0,0,0-2.51-.92h-3.95Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M198,899.35H190.4V905h8.87v2.57H187.19V889.11h12v2.59H190.4v5.11H198Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M201.89,907.6V889.11h5.46a8.57,8.57,0,0,1,4.35,1.1,7.41,7.41,0,0,1,2.93,3.09,9.78,9.78,0,0,1,1.05,4.6v.93a9.78,9.78,0,0,1-1.05,4.62,7.32,7.32,0,0,1-3,3.07,8.92,8.92,0,0,1-4.43,1.08Zm3.21-15.9V905h2.09a4.8,4.8,0,0,0,3.88-1.58,6.89,6.89,0,0,0,1.38-4.54v-1a7.08,7.08,0,0,0-1.31-4.6,4.62,4.62,0,0,0-3.79-1.59Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                    </g>
                </g>
                <g id="Aborted_Group">
                    <g id="Aborted_Form">
                        <path id="Aborted" d="M1260,948.5a5.51,5.51,0,0,1-5.5-5.5V857a5.51,5.51,0,0,1,5.5-5.5h200a5.51,5.51,0,0,1,5.5,5.5v86a5.51,5.51,0,0,1-5.5,5.5Z" transform="translate(-31.5 -10.5)" :style="{ fill: primaryColor }" />
                        <path :id="'Aborted_Border' + uniqueId" d="M1460,852a5,5,0,0,1,5,5v86a5,5,0,0,1-5,5H1260a5,5,0,0,1-5-5V857a5,5,0,0,1,5-5h200m0-1H1260a6,6,0,0,0-6,6v86a6,6,0,0,0,6,6h200a6,6,0,0,0,6-6V857a6,6,0,0,0-6-6Z" transform="translate(-31.5 -10.5)" style="fill: ''" />
                    </g>
                    <g style="isolation:isolate">
                        <path d="M1314.87,903.29h-7.16l-1.5,4.31h-3.34l7-18.49h2.89l7,18.49h-3.35Zm-6.26-2.59H1314l-2.68-7.66Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M1321.83,907.6V889.11h6.33a7.71,7.71,0,0,1,4.77,1.26,4.42,4.42,0,0,1,1.64,3.75,4,4,0,0,1-.68,2.28,4.4,4.4,0,0,1-2,1.57,4.19,4.19,0,0,1,2.32,1.53,4.5,4.5,0,0,1,.82,2.7,4.92,4.92,0,0,1-1.67,4,7.28,7.28,0,0,1-4.78,1.4Zm3.21-10.7h3.15a3.68,3.68,0,0,0,2.34-.68,2.76,2.76,0,0,0,.06-3.91,4,4,0,0,0-2.43-.61H1325Zm0,2.36V905h3.57a3.46,3.46,0,0,0,2.36-.75,2.63,2.63,0,0,0,.85-2.08c0-1.92-1-2.9-3-2.94Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M1353,898.84a11.31,11.31,0,0,1-.94,4.77,7.14,7.14,0,0,1-2.68,3.14,7.88,7.88,0,0,1-8,0,7.11,7.11,0,0,1-2.71-3.13,11,11,0,0,1-1-4.68v-1a11.27,11.27,0,0,1,1-4.78,7.2,7.2,0,0,1,2.71-3.16,7.87,7.87,0,0,1,8,0,7.14,7.14,0,0,1,2.7,3.12,11.32,11.32,0,0,1,1,4.74Zm-3.21-1a8.13,8.13,0,0,0-1.16-4.71,3.82,3.82,0,0,0-3.3-1.63,3.76,3.76,0,0,0-3.25,1.63,7.79,7.79,0,0,0-1.2,4.61v1.07a8,8,0,0,0,1.18,4.71,4.12,4.12,0,0,0,6.58,0,8.26,8.26,0,0,0,1.15-4.75Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M1363,900.49h-3.58v7.11h-3.21V889.11h6.5a7.56,7.56,0,0,1,4.94,1.44,5.08,5.08,0,0,1,1.74,4.15,5.18,5.18,0,0,1-.9,3.11,5.73,5.73,0,0,1-2.49,1.93l4.15,7.69v.17h-3.44Zm-3.58-2.59h3.3a3.69,3.69,0,0,0,2.54-.82,2.85,2.85,0,0,0,.91-2.24,3.05,3.05,0,0,0-.84-2.3,3.6,3.6,0,0,0-2.52-.84h-3.39Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M1385.12,891.7h-5.76v15.9h-3.19V891.7h-5.71v-2.59h14.66Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M1398.35,899.35h-7.59V905h8.87v2.57h-12.08V889.11h12v2.59h-8.79v5.11h7.59Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M1402.25,907.6V889.11h5.46a8.57,8.57,0,0,1,4.35,1.1,7.49,7.49,0,0,1,2.94,3.09,9.9,9.9,0,0,1,1,4.6v.93a9.78,9.78,0,0,1-1,4.62,7.35,7.35,0,0,1-3,3.07,9,9,0,0,1-4.44,1.08Zm3.21-15.9V905h2.1a4.82,4.82,0,0,0,3.88-1.58,6.84,6.84,0,0,0,1.37-4.54v-1a7.08,7.08,0,0,0-1.3-4.6,4.65,4.65,0,0,0-3.8-1.59Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                    </g>
                </g>
                <g id="Aborting_Group">
                    <g id="Aborting_Form">
                        <path id="Aborting" d="M1660,948.5a5.51,5.51,0,0,1-5.5-5.5V857a5.51,5.51,0,0,1,5.5-5.5h200a5.51,5.51,0,0,1,5.5,5.5v86a5.51,5.51,0,0,1-5.5,5.5Z" transform="translate(-31.5 -10.5)" :style="{ fill: stateTransitionColor }" />
                        <path :id="'Aborting_Border' + uniqueId" d="M1860,852a5,5,0,0,1,5,5v86a5,5,0,0,1-5,5H1660a5,5,0,0,1-5-5V857a5,5,0,0,1,5-5h200m0-1H1660a6,6,0,0,0-6,6v86a6,6,0,0,0,6,6h200a6,6,0,0,0,6-6V857a6,6,0,0,0-6-6Z" transform="translate(-31.5 -10.5)" style="fill: ''" />
                    </g>
                    <g style="isolation:isolate">
                        <path d="M1709,903.29h-7.16l-1.49,4.31H1697l7-18.49h2.88l7,18.49h-3.35Zm-6.25-2.59h5.35l-2.68-7.66Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M1715.92,907.6V889.11h6.34a7.71,7.71,0,0,1,4.77,1.26,4.44,4.44,0,0,1,1.64,3.75,4,4,0,0,1-.69,2.28,4.32,4.32,0,0,1-2,1.57,4.13,4.13,0,0,1,2.31,1.53,4.44,4.44,0,0,1,.82,2.7,4.89,4.89,0,0,1-1.67,4,7.25,7.25,0,0,1-4.78,1.4Zm3.21-10.7h3.15a3.64,3.64,0,0,0,2.34-.68,2.33,2.33,0,0,0,.85-1.93,2.37,2.37,0,0,0-.78-2,4,4,0,0,0-2.43-.61h-3.13Zm0,2.36V905h3.57a3.43,3.43,0,0,0,2.36-.75,2.6,2.6,0,0,0,.85-2.08q0-2.88-2.94-2.94Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M1747.08,898.84a11.47,11.47,0,0,1-.94,4.77,7.1,7.1,0,0,1-2.69,3.14,7.86,7.86,0,0,1-8,0,7.2,7.2,0,0,1-2.72-3.13,11,11,0,0,1-1-4.68v-1a11.27,11.27,0,0,1,1-4.78,7.25,7.25,0,0,1,2.7-3.16,7.87,7.87,0,0,1,8,0,7,7,0,0,1,2.7,3.12,11.17,11.17,0,0,1,1,4.74Zm-3.21-1a8,8,0,0,0-1.17-4.71,4.11,4.11,0,0,0-6.55,0,7.93,7.93,0,0,0-1.2,4.61v1.07a8,8,0,0,0,1.19,4.71,4.12,4.12,0,0,0,6.58,0,8.26,8.26,0,0,0,1.15-4.75Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M1757.07,900.49h-3.58v7.11h-3.21V889.11h6.5a7.53,7.53,0,0,1,4.93,1.44,5.08,5.08,0,0,1,1.74,4.15,5.17,5.17,0,0,1-.89,3.11,5.76,5.76,0,0,1-2.5,1.93l4.15,7.69v.17h-3.43Zm-3.58-2.59h3.3a3.71,3.71,0,0,0,2.54-.82,2.85,2.85,0,0,0,.91-2.24,3.05,3.05,0,0,0-.84-2.3,3.63,3.63,0,0,0-2.52-.84h-3.39Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M1779.22,891.7h-5.76v15.9h-3.19V891.7h-5.71v-2.59h14.66Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M1785,907.6h-3.2V889.11h3.2Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M1803.65,907.6h-3.21l-8.24-13.12V907.6H1789V889.11h3.22l8.26,13.17V889.11h3.19Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                        <path d="M1821.61,905.2a6.14,6.14,0,0,1-2.78,2,11.3,11.3,0,0,1-4,.67,8,8,0,0,1-4.11-1.05,7,7,0,0,1-2.76-3,10.57,10.57,0,0,1-1-4.57v-1.45a9.79,9.79,0,0,1,2-6.55,6.93,6.93,0,0,1,5.59-2.35,7.35,7.35,0,0,1,4.9,1.53,6.63,6.63,0,0,1,2.19,4.4h-3.15a3.54,3.54,0,0,0-3.87-3.34,3.79,3.79,0,0,0-3.28,1.55,8,8,0,0,0-1.17,4.56V899a7.46,7.46,0,0,0,1.27,4.65,4.15,4.15,0,0,0,3.51,1.66,4.59,4.59,0,0,0,3.5-1.12v-3.62h-3.81v-2.44h7Z" transform="translate(-31.5 -10.5)" :style="{ fill: isDark ? '#272727' : '#ffffff' }" />
                    </g>
                </g>
                <g id="held-unholding">
                    <line x1="634.5" y1="69.5" x2="822.72" y2="69.5" />
                    <line x1="648.85" y1="69.5" x2="822.72" y2="69.5" style="fill:none;stroke:#000;stroke-miterlimit:10" />
                    <polygon points="651.77 79.47 634.5 69.5 651.77 59.53 651.77 79.47" />
                </g>
                <g id="holding-held">
                    <line x1="1034.39" y1="69.5" x2="1222.61" y2="69.5" />
                    <line x1="1048.74" y1="69.5" x2="1222.61" y2="69.5" style="fill:none;stroke:#000;stroke-miterlimit:10" />
                    <polygon points="1051.66 79.47 1034.39 69.5 1051.66 59.53 1051.66 79.47" />
                </g>
                <g id="execute-holding">
                    <path d="M1037.33,292V233.56a6,6,0,0,1,6-6H1354a6,6,0,0,0,6-6V143.24" transform="translate(-31.5 -10.5)" style="fill:none;stroke:#000;stroke-miterlimit:10" />
                    <polygon points="1338.47 135.66 1328.5 118.39 1318.53 135.66 1338.47 135.66" />
                </g>
                <g id="unholding-execute">
                    <path d="M882.67,277.65V233.56a6,6,0,0,0-6-6H566a6,6,0,0,1-6-6V128.89" transform="translate(-31.5 -10.5)" style="fill:none;stroke:#000;stroke-miterlimit:10" />
                    <polygon points="861.14 264.23 851.17 281.5 841.2 264.23 861.14 264.23" />
                </g>
                <g id="execute-suspending">
                    <path d="M1037.33,388.44v58.27a6,6,0,0,0,6,6H1354a6,6,0,0,1,6,6v78.05" transform="translate(-31.5 -10.5)" style="fill:none;stroke:#000;stroke-miterlimit:10" />
                    <polygon points="1318.53 523.34 1328.5 540.61 1338.47 523.34 1318.53 523.34" />
                </g>
                <g id="unsuspending-execute">
                    <path d="M882.67,402.8v43.91a6,6,0,0,1-6,6H566a6,6,0,0,0-6,6v92.4" transform="translate(-31.5 -10.5)" style="fill:none;stroke:#000;stroke-miterlimit:10" />
                    <polygon points="841.2 395.21 851.16 377.94 861.14 395.21 841.2 395.21" />
                </g>
                <g id="completing-complete">
                    <line x1="1622.61" y1="329.5" x2="1434.39" y2="329.5" />
                    <line x1="1608.26" y1="329.5" x2="1434.39" y2="329.5" style="fill:none;stroke:#000;stroke-miterlimit:10" />
                    <polygon points="1605.34 319.53 1622.61 329.5 1605.34 339.47 1605.34 319.53" />
                </g>
                <g id="execute-completing">
                    <line x1="1222.61" y1="329.5" x2="1034.39" y2="329.5" />
                    <line x1="1208.26" y1="329.5" x2="1034.39" y2="329.5" style="fill:none;stroke:#000;stroke-miterlimit:10" />
                    <polygon points="1205.34 319.53 1222.61 329.5 1205.34 339.47 1205.34 319.53" />
                </g>
                <g id="starting-execute">
                    <line x1="822.61" y1="329.5" x2="634.39" y2="329.5" />
                    <line x1="808.26" y1="329.5" x2="634.39" y2="329.5" style="fill:none;stroke:#000;stroke-miterlimit:10" />
                    <polygon points="805.34 319.53 822.61 329.5 805.34 339.47 805.34 319.53" />
                </g>
                <g id="idle-starting">
                    <line x1="422.61" y1="329.5" x2="234.39" y2="329.5" />
                    <line x1="408.26" y1="329.5" x2="234.39" y2="329.5" style="fill:none;stroke:#000;stroke-miterlimit:10" />
                    <polygon points="405.34 319.53 422.61 329.5 405.34 339.47 405.34 319.53" />
                </g>
                <g id="suspending-suspended">
                    <line x1="1034.39" y1="589.5" x2="1222.61" y2="589.5" />
                    <line x1="1048.74" y1="589.5" x2="1222.61" y2="589.5" style="fill:none;stroke:#000;stroke-miterlimit:10" />
                    <polygon points="1051.66 599.47 1034.39 589.5 1051.66 579.53 1051.66 599.47" />
                </g>
                <g id="suspended-unsuspending">
                    <line x1="634.39" y1="589.5" x2="822.61" y2="589.5" />
                    <line x1="648.74" y1="589.5" x2="822.61" y2="589.5" style="fill:none;stroke:#000;stroke-miterlimit:10" />
                    <polygon points="651.66 599.47 634.39 589.5 651.66 579.53 651.66 599.47" />
                </g>
                <g id="aborting-aborted">
                    <line x1="1434.39" y1="889.5" x2="1622.61" y2="889.5" />
                    <line x1="1448.74" y1="889.5" x2="1622.61" y2="889.5" style="fill:none;stroke:#000;stroke-miterlimit:10" />
                    <polygon points="1451.66 899.47 1434.39 889.5 1451.66 879.53 1451.66 899.47" />
                </g>
                <g id="aborted-clearing">
                    <line x1="1034.39" y1="889.5" x2="1222.61" y2="889.5" />
                    <line x1="1048.74" y1="889.5" x2="1222.61" y2="889.5" style="fill:none;stroke:#000;stroke-miterlimit:10" />
                    <polygon points="1051.66 899.47 1034.39 889.5 1051.66 879.53 1051.66 899.47" />
                </g>
                <g id="stopping-stopped">
                    <line x1="234.39" y1="889.5" x2="422.61" y2="889.5" />
                    <line x1="248.74" y1="889.5" x2="422.61" y2="889.5" style="fill:none;stroke:#000;stroke-miterlimit:10" />
                    <polygon points="251.66 899.47 234.39 889.5 251.66 879.53 251.66 899.47" />
                </g>
                <g id="resetting-idle">
                    <line x1="128.5" y1="378.3" x2="128.5" y2="540.7" />
                    <line x1="128.5" y1="392.65" x2="128.5" y2="540.7" style="fill:none;stroke:#000;stroke-miterlimit:10" />
                    <polygon points="118.53 395.57 128.5 378.3 138.47 395.57 118.53 395.57" />
                </g>
                <g id="stopped-resetting">
                    <line x1="128.5" y1="638.3" x2="128.5" y2="840.7" />
                    <line x1="128.5" y1="652.65" x2="128.5" y2="840.7" style="fill:none;stroke:#000;stroke-miterlimit:10" />
                    <polygon points="118.53 655.57 128.5 638.3 138.47 655.57 118.53 655.57" />
                </g>
                <g id="complete-resetting">
                    <path d="M1760,389.11V696.67a6,6,0,0,1-6,6H160.33" transform="translate(-31.5 -10.5)" style="fill:none;stroke:#000;stroke-miterlimit:10" />
                </g>
                <g id="inner-stopping">
                    <line x1="528.5" y1="840.7" x2="528.5" y2="745.9" />
                    <line x1="528.5" y1="826.35" x2="528.5" y2="745.9" style="fill:none;stroke:#000;stroke-miterlimit:10" />
                    <polygon points="538.47 823.43 528.5 840.7 518.53 823.43 538.47 823.43" />
                </g>
                <g id="outer-aborting">
                    <line x1="1728.5" y1="840.5" x2="1728.5" y2="756.9" />
                    <line x1="1728.5" y1="826.15" x2="1728.5" y2="756.9" style="fill:none;stroke:#000;stroke-miterlimit:10" />
                    <polygon points="1738.47 823.23 1728.5 840.5 1718.53 823.23 1738.47 823.23" />
                </g>
                <g id="clearing-stopped">
                    <path d="M854,900H768.65a6,6,0,0,0-6,6v73.33a6,6,0,0,1-6,6H368.22a6,6,0,0,1-6-6V900.46" transform="translate(-31.5 -10.5)" style="fill:none;stroke:#000;stroke-miterlimit:10" />
                </g>
            </svg>
            <!-- Buttons to interact with the Statemachine Mode -->
            <v-card class="mt-3" color="elevatedCard">
                <v-card-title class="text-subtitle-2">Set Statemachine Mode</v-card-title>
                <v-divider></v-divider>
                <v-card-actions>
                    <v-btn variant="elevated" @click="setMode(1)" class="mr-2">Production</v-btn>
                    <v-btn variant="elevated" @click="setMode(2)" class="mr-2">Maintenance</v-btn>
                    <v-btn variant="elevated" @click="setMode(3)">Manual</v-btn>
                </v-card-actions>
            </v-card>
            <!-- Buttons to interact with the Statemachine States -->
            <v-card class="mt-3" color="elevatedCard">
                <v-card-title class="text-subtitle-2">Send State Command</v-card-title>
                <v-divider></v-divider>
                <v-card-actions>
                    <v-btn v-if="resetStates.includes(makeUniform(submodelElementData.value[0].value))"      @click="setState(1)" variant="elevated" class="mr-2">Reset</v-btn>
                    <v-btn v-if="startStates.includes(makeUniform(submodelElementData.value[0].value))"      @click="setState(2)" variant="elevated" class="mr-2">Start</v-btn>
                    <v-btn v-if="stopStates.includes(makeUniform(submodelElementData.value[0].value))"       @click="setState(3)" variant="elevated" class="mr-2">Stop</v-btn>
                    <v-btn v-if="holdStates.includes(makeUniform(submodelElementData.value[0].value))"       @click="setState(4)" variant="elevated" class="mr-2">Hold</v-btn>
                    <v-btn v-if="unholdStates.includes(makeUniform(submodelElementData.value[0].value))"     @click="setState(5)" variant="elevated" class="mr-2">Unhold</v-btn>
                    <v-btn v-if="suspendStates.includes(makeUniform(submodelElementData.value[0].value))"    @click="setState(6)" variant="elevated" class="mr-2">Suspend</v-btn>
                    <v-btn v-if="unsuspendStates.includes(makeUniform(submodelElementData.value[0].value))"  @click="setState(7)" variant="elevated" class="mr-2">Unsuspend</v-btn>
                    <v-btn v-if="abortStates.includes(makeUniform(submodelElementData.value[0].value))"      @click="setState(8)" variant="elevated" class="mr-2">Abort</v-btn>
                    <v-btn v-if="clearStates.includes(makeUniform(submodelElementData.value[0].value))"      @click="setState(9)" variant="elevated" class="mr-2">Clear</v-btn>
                </v-card-actions>
            </v-card>
        </v-card>
    </v-container>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { useTheme } from 'vuetify';
import { useNavigationStore } from '@/store/NavigationStore';
import RequestHandling from '../../mixins/RequestHandling';
import SubmodelElementHandling from '../../mixins/SubmodelElementHandling';

export default defineComponent({
    name: 'HTWFuehrungskomponente',
    components: {
        RequestHandling, // Mixin to handle the requests to the AAS
        SubmodelElementHandling, // Mixin to handle the submodel elements
    },
    mixins: [RequestHandling, SubmodelElementHandling],
    props: ['submodelElementData', 'selectedNode'],

    setup() {
        const theme = useTheme()
        const navigationStore = useNavigationStore()

        return {
            theme, // Theme Object
            navigationStore, // NavigationStore Object
        }
    },

    data() {
        return {
            resetStates:        ['Complete', 'Stopped'], // List of states that can be reset
            startStates:        ['Idle'], // List of states that can be started
            stopStates:         ['Idle', 'Held', 'Execute', 'Suspended', 'Complete'], // List of states that can be stopped
            holdStates:         ['Execute'], // List of states that can be held
            unholdStates:       ['Held'], // List of states that can be unheld
            suspendStates:      ['Execute'], // List of states that can be suspended
            unsuspendStates:    ['Suspended'], // List of states that can be unsuspended
            abortStates:        ['Idle', 'Held', 'Execute', 'Suspended', 'Complete'], // List of states that can be aborted
            clearStates:        ['Aborted'], // List of states that can be cleared
        }
    },

    mounted() {
        this.updateSVG(); // set the visual state of the PackML SVG
    },

    watch: {
        // Watch for changes in the submodelElementData and update the SVG
        submodelElementData: {
            handler() {
                this.updateSVG();
            },
            deep: true,
        },
    },

    computed: {
        // Check if the current Theme is dark
        isDark() {
            return this.theme.global.current.value.dark
        },

        // Returns a hash created from the selectedNode.pathFull
        uniqueId() {
            return this.generateUUIDFromString(this.selectedNode.pathFull);
        },

        // returns the primary color of the current theme
        primaryColor() {
            return this.$vuetify.theme.themes.light.colors.primary;
        },

        // returns the primary lighten 2 color of the current theme
        primaryColorLighten2() {
            let primary = this.$vuetify.theme.themes.light.colors.primary;
            return this.lightenDarkenColor(primary, 20);
        },

        // returns the state transition color
        stateTransitionColor() {
            return '#999999';
        },

        // returns the primary darken 2 color of the current theme
        executeColor() {
            return '#565656';
        },

        // States of the Statemachine
        states() {
            return [
                {
                    value: 0,
                    text: 'Undefined',
                    path: undefined
                },
                {
                    value: 1,
                    text: 'Clearing',
                    path: document.getElementById('Clearing_Border' + this.uniqueId)
                },
                {
                    value: 2,
                    text: 'Stopped',
                    path: document.getElementById('Stopped_Border' + this.uniqueId)
                },
                {
                    value: 3,
                    text: 'Starting',
                    path: document.getElementById('Starting_Border' + this.uniqueId)
                },
                {
                    value: 4,
                    text: 'Idle',
                    path: document.getElementById('Idle_Border' + this.uniqueId)
                },
                {
                    value: 5,
                    text: 'Suspended',
                    path: document.getElementById('Suspended_Border' + this.uniqueId)
                },
                {
                    value: 6,
                    text: 'Execute',
                    path: document.getElementById('Execute_Border' + this.uniqueId)
                },
                {
                    value: 7,
                    text: 'Stopping',
                    path: document.getElementById('Stopping_Border' + this.uniqueId)
                },
                {
                    value: 8,
                    text: 'Aborting',
                    path: document.getElementById('Aborting_Border' + this.uniqueId)
                },
                {
                    value: 9,
                    text: 'Aborted',
                    path: document.getElementById('Aborted_Border' + this.uniqueId)
                },
                {
                    value: 10,
                    text: 'Holding',
                    path: document.getElementById('Holding_Border' + this.uniqueId)
                },
                {
                    value: 11,
                    text: 'Held',
                    path: document.getElementById('Held_Border' + this.uniqueId)
                },
                {
                    value: 12,
                    text: 'Unholding',
                    path: document.getElementById('Unholding_Border' + this.uniqueId)
                },
                {
                    value: 13,
                    text: 'Suspending',
                    path: document.getElementById('Suspending_Border' + this.uniqueId)
                },
                {
                    value: 14,
                    text: 'Unsuspending',
                    path: document.getElementById('Unsuspending_Border' + this.uniqueId)
                },
                {
                    value: 15,
                    text: 'Resetting',
                    path: document.getElementById('Resetting_Border' + this.uniqueId)
                },
                {
                    value: 16,
                    text: 'Completing',
                    path: document.getElementById('Completing_Border' + this.uniqueId)
                },
                {
                    value: 17,
                    text: 'Complete',
                    path: document.getElementById('Complete_Border' + this.uniqueId)
                },
            ]
        },
    },

    methods: {
        // Function to update the visual state of the PackML SVG
        updateSVG() {
            // console.log('updateSVG');
            let states = [] as any;
            states = this.states;
            states.forEach((state: any) => {
                if (this.submodelElementData.value[0].value && state.text === this.makeUniform(this.submodelElementData.value[0].value)) {
                    state.path.style.strokeWidth = "4";
                    state.path.style.stroke = this.isDark ? "#ff0000" : "#ff0000";
                    state.path.style.fill = "rgb(0,0,0);";
                } else {
                    if (state.path != undefined) {
                        state.path.style.strokeWidth = "";
                        state.path.style.stroke = "";
                        state.path.style.fill = "";
                    }
                }
            });
        },

        // Function to make the state prop uniform
        makeUniform(state: string) {
            if (typeof state != 'string') return state;
            let originalString = state.toLowerCase();
            return originalString.charAt(0).toUpperCase() + originalString.slice(1);
        },

        // Function to set the Mode of the PackML Statemachine
        setMode(mode: number) {
            // console.log("Set Mode: ", mode, this.selectedNode.pathFull + '/Prop_UnitMode/value');
            let propName = 'Prop_Mode';
            // console.log('setState: ', state, this.selectedNode)
            this.submodelElementData.value.forEach((element: any) => {
                if (element.idShort == 'Prop_UnitMode') propName = 'Prop_UnitMode';
            });
            let path = this.selectedNode.pathFull + '/' + propName + '/value';
            let content = "'" + mode + "'";
            let headers = { 'Content-Type': 'application/json' };
            let context = 'updating Property "Prop_UnitMode"';
            let disableMessage = false;
            // Send Request to update the value of the property
            this.putRequest(path, content, headers, context, disableMessage).then((response: any) => {
                if (response.success) {
                    this.navigationStore.dispatchSnackbar({ status: true, timeout: 4000, color: 'success', btnColor: 'buttonText', text: 'PackML Mode updated successfully.' }); // Show Success Snackbar
                }
            });
        },

        // Function to set the State of the PackML Statemachine
        setState(state: number) {
            // check which property-name is used for the state
            let propName = 'Prop_ControlCommand';
            // console.log('setState: ', state, this.selectedNode)
            this.submodelElementData.value.forEach((element: any) => {
                if (element.idShort == 'Prop_eCommand') propName = 'Prop_eCommand';
            });
            let path = this.selectedNode.pathFull + '/' + propName + '/value';
            let content = "'" + state + "'";
            let headers = { 'Content-Type': 'application/json' };
            let context = 'updating Property "' + propName + '"';
            let disableMessage = false;
            // Send Request to update the value of the property
            this.putRequest(path, content, headers, context, disableMessage).then((response: any) => {
                this.navigationStore.dispatchSnackbar({ status: true, timeout: 4000, color: 'success', btnColor: 'buttonText', text: 'PackML State updated successfully.' }); // Show Success Snackbar
            });
        },

        lightenDarkenColor(hex: string, percent: number) {
            // Parse the hex color string to RGB values
            const hexColor = hex.replace('#', '');
            const r = parseInt(hexColor.substring(0, 2), 16);
            const g = parseInt(hexColor.substring(2, 4), 16);
            const b = parseInt(hexColor.substring(4, 6), 16);

            // Calculate the new RGB values based on the percent
            const newR = Math.round(Math.min(255, r + (percent / 100) * r));
            const newG = Math.round(Math.min(255, g + (percent / 100) * g));
            const newB = Math.round(Math.min(255, b + (percent / 100) * b));

            // Convert the RGB values back to a hex color string
            const newHexColor = ((newR << 16) | (newG << 8) | newB).toString(16).padStart(6, '0');
            return "#" + newHexColor;
        }
    },
});
</script>